<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <articleItem
        v-for="item in articleList"
        :key="item.art_id"
        :article="item"
      ></articleItem>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import articleItem from './article-item.vue'
import { articleListApi } from '@/api/Home'
export default {
  data() {
    return {
      timestamp: Date.now(), // 点前时间戳
      articleList: [], // 存储文章列表数据
      loading: false, // 上拉加载的状态
      finished: false, // 上拉加载的完成状态
      isLoading: false // 控制下拉刷新的刷新状态
    }
  },
  components: {
    articleItem
  },
  props: {
    // 找父组件要当前频道数据，目的是要根据
    // 不同的频道id获取不同频道下的数据
    channel: {
      type: Object
    }
  },
  // created() {
  //   this.getAticleList()
  // },
  methods: {
    // 下拉刷新方法触发
    async onRefresh() {
      // 注意：当onRefresh方法被执行的时候，isLoading的值会自动的变为true
      // 此时页面一直处于下拉刷新的状态
      console.log(this.isLoading, '下拉刷新中....');
      // 下拉刷新的需求是请求出最新的数据，覆盖掉articleList
      // 1. 重置时间戳
      this.timestamp = Date.now()
      // 2. 重置finished状态
      this.finished = false
      // 3. 请求文章列表接口
      await this.getAticleList()
      // 4. 等数据返回重置isLoading为false，避免一直处于下拉状态
      this.isLoading = false
    },
    // 上拉加载的方法触发
    async onLoad() {
      console.log('触发了上拉加载onload方法')
      const { data } = await articleListApi({
        channel_id: this.channel.id,
        timestamp: this.timestamp
      })
      // onLoad方法一旦触发会自动设置loading为true,此时页面一直处于加载状态
      // 要想再次实现上拉加载的效果，需要在请求到数据之后手动将loading设置为false
      this.loading = false
      // 接口返回的pre_timestamp字段作为下一次上拉加载的timestamp实现分页加载
      if (data.data.pre_timestamp === null) {
        this.finished = true
      } else {
        this.timestamp = data.data.pre_timestamp
      }
      // 将请求到的数据追加到文章列表数组后面
      this.articleList = [...this.articleList, ...data.data.results]
    },
    // 根据文章id请求文章列表数据
    async getAticleList() {
      const { data } = await articleListApi({
        channel_id: this.channel.id,
        timestamp: this.timestamp
      })
      this.articleList = data.data.results
      // 加载到数据之后一定要将pre_timestamp赋值给timestamp，
      // 以防接下来上拉加载拿到重复的数据
      this.timestamp = data.data.pre_timestamp
    }
  }
}
</script>

<style>
</style>